<template>
  <div class="lin_login">
    <div class="lin_login_box">
      <ul>
        <li><img :src="image" alt=""></li>

      </ul>
    </div>

    <div class="login_container">
      <div class="login login_container_box">
        <LoginDialogIndex
        :visible="true"
        />
      </div>

      <div class="login lin_login_content">
        <p><a href="#">Insta360APP Download</a> | <a href="#">User Service Agreement</a> | <a href="#">Insta360's privacy policy</a></p>
        <p>Copyright © 2023 insta360.com All Rights Reserved. Guang Dong ICP No. 16095556-4.</p>
      </div>
    </div>

  </div>
</template>




<script lang="ts">
import { Insta360ScrapyIndexImg} from '@/api/api'

export default defineComponent({
  setup(){
    const data = reactive({
      Insta360ScrapyIndexImgData: ref(),
      currentImage: ref(0),
      Index: ref([45, 46, 47]),
      image: ref(),
      registerinfo: ref({
        username: '',
        password: '',
        repassword: '',
      })
    })


    Insta360ScrapyIndexImg('').then((res: any) => {
      data.Insta360ScrapyIndexImgData = res._rawValue.title
    }).catch((err: any) => {
      console.log(err, '请求失败')
    })

    const getItemUrl = (index: any) => {
      // 根据索引获取指定项的 url
      data.image =  data.Insta360ScrapyIndexImgData[data.Index[index]].url;
    }

    const startSwitchingImages = () => {
      setInterval(() => {
        if(data.currentImage < 2){
          data.currentImage++;
          getItemUrl(data.currentImage);
          return
        }
        else if (data.currentImage >= 2){
          data.currentImage = 0;
          getItemUrl(data.currentImage);
          return
        }
        data.currentImage = 0;
        
      }, 3000); // 每隔3秒切换一次图片
    }

    

    onMounted(() => {
      startSwitchingImages();
    });


    return{
      ...toRefs(data),
      getItemUrl,

    }
  }


})




</script>



<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.lin_login {
  width: 100%;
  height: 100%;
  position: relative;
}


.lin_login_box {
  position: relative;
  width: 100%;
  background-size: cover;
}

.lin_login_box ul li img {
  max-width: 100%;
  height: auto;
}


.login_container_box {
  top: 15%;
  right: 10%;
}

.lin_login_content {
  top: 93% !important;
  color: hsla(0,0%,100%,.8) !important;
  font-size: 11px;
}

.lin_login_content a {
  color: hsla(0,0%,100%,.8) !important;
}

/* 响应式布局 - 当屏幕宽度小于或等于 600px 时 */
@media screen and (max-width: 1460px) {

  .login_container_box {
    left: 31%;
  }

}


@media screen and (max-width: 1438px) {

  .lin_login_box {
    display: none
  }

}

@media screen and (max-width: 969px) {

  .login_container_box {
    left: 24%;
  }

}

@media screen and (max-width: 742px) {

.login_container_box {
  left: 18%;
}

}


@media screen and (max-width: 670px) {

.login_container_box {
  left: 14%;
}

}

@media screen and (max-width: 629px) {

.login_container_box {
  left: 1%;
}

}

</style>